<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./node_modules//zrender/dist/zrender.min.js"></script>
  <style>
    #box{
      width: 600px;
      height: 600px;
      background-color: #eee;
    }

  </style>
</head>
<body>
  <div id="box" ></div>
</body>
</html>
<script>
  let zr = zrender.init(document.getElementById('box'));

  let rect = new zrender.Rect({
    shape:{
      // 形状
      x:10,
      y:10,
      width:50,
      height:50
    },
    style:{
      fill:'red'
    }
  })

  let style = {
    fill:'red',
    stroke:'blue',
    lineWidth:5
  }

  zr.add(rect);

  //折线
  let line = new zrender.Polyline({
    shape:{
      points:[
        [30,50],
        [90,90],
        [120,150],
        [200,300]
      ]
    },
    style:{
      stroke:'blue',
      lineWidth:2
    }
  })
  zr.add(line);

  rect.attr('style',{
    fill:'blue'
  })

  line.attr('shape',{
    points:[
      [100,100],
      [200,200]
    ]
  })

  let c = new zrender.Circle({
    shape:{
      cx:200,
      cy:100,
      r:50
    },
    style
  })
  zr.add(c);


  let h = new zrender.Heart({
    shape:{
      cx:350,
      cy:100,
      width:100,
      height:100
    },
    style:{
      ...style,
      lineWidth:0
    }
  })
  zr.add(h);
</script>